<template>
    <div>
      <div style="width: 84%;margin: auto;font-size: 0.5rem" v-if="chenload">
        <p class="p1">欢迎来到赛思医考帮</p>
        <p class="p2">推荐您绑定第三方账号，进行快速登录</p>
        <div style="margin-top: 0.8rem;overflow: hidden">
          <div class=" binding">
            <img src="../../../src/assets/img/greenwx.png" alt="">
            <p>微信</p>
            <p>{{peopleName}}</p>
            <button class="btn2" @click="bang()" v-if="bol">绑定</button>
            <button class="btn111" @click="bang1()" v-else>解绑</button>
          </div>
          <div class=" binding">
            <img src="../../../src/assets/img/blueqq.png" alt="">
            <p>QQ</p>
            <p>{{peopleName1}}</p>
			<button class="btn2" @click="qq()" v-if="bol1">绑定</button>
			<button class="btn111" @click="qq1()" v-else>解绑</button>
          </div>
          <p class="pass" @click="passback()">跳过</p>
          <div class="agre">
            <span><span @click="fuclick">《服务协议》</span>客服电话：</span>
            <a href="tel:15639255665">15639255665</a>
          </div>
        </div>
      </div>
	  <div class="loadmore" v-else>
	    <img src="../../../src/assets/img/load.gif" alt="">
	  </div>
	  
	  <!-- 登录弹窗 -->
	  <div class="shoewr-chenhoupasslogin">
	  	<div class="chen-contener chenpass">
	  		<p class="chen-title">提示</p>
	  		<p class="chen-text chen-textactive">您的登录信息已经失效，请重新登录</p>
	  		<div class="chen-but">
	  			<p class="chen-but-no" @click="repeatclose()">取消</p>
	  			<p class="chen-but-yes chen-but-yesactive" @click="enter()">去登录</p>
	  		</div>
	  	</div>
	  </div>
    </div>
</template>

<script>
  import { MessageBox } from 'mint-ui';
    export default {
        name: "Bangding",
      data(){
          return{
			chenload:false,
            bol:true,    //是否绑定微信  true没有绑定
            b:'',
            peopleName:'',   //微信
            bol1:true,    //是否绑定QQ
            b1:'',
            peopleName1:'',//QQ
          }
      },
      methods:{
		  // 服务协议跳转
		  fuclick(){
			 this.$router.push({
			   path:'/severce'
			 }) 
		  },
				// 点击跳过
        passback(){
		  // console.log(88);
          this.$router.push({
            path:'/user'
          })
        },
		enter() {
		  //判断是否在微信中打开
		  var ua = navigator.userAgent.toLowerCase();
		  var isWeixin = ua.indexOf('micromessenger') != -1;
		  var mainpath = this.$store.state;
			// var href = mainpath.url+'User/WechatLogin?to='+mainpath.rouchpath+'&route=ge&fromsource=1';
			// console.log(href);
// 			if(localStorage.getItem('token')){
// 				this.$router.push({
// 				  path:'/center'
// 				})
// 			}else{  
				this.d();
		    // }
		},
		repeatclose(){
			// $('.shoewr-chenhoupass').fadeOut();
			localStorage.clear();
			$('.shoewr-chenhoupasslogin').fadeOut();
			this.$router.push({
			  path:'/user'
			})
		},
		// 点击绑定QQ
		qq(){
			var that = this;
			var mainpath = that.$store.state;
			//判断是否在微信打开
			var url1 = this.$route.fullPath;
			// var url = url1.split("/")[1];
			// console.log(url1)
			var url2 = encodeURIComponent(url1);
			window.localStorage.setItem('hrefurl',url2);
			var urllogin = window.location.href.split('#')[0];
			// 没有绑定
				// var path = encodeURIComponent(mainpath.rouchpath);
				// console.log(path)
			var href = mainpath.url+'User/QQLogin?to='+urllogin+'&route=bangding&fromsource='+mainpath.fromsource+'';
			// var href = mainpath.url+'User/QQLogin?route=bangding&fromsource='+mainpath.fromsource+'';
			window.location.href=href;
			// console.log(href)
		},
		// 解绑QQ
		qq1(){
			// 解绑
			// alert(999)
			var that = this;
			var mainpath = that.$store.state;
			that.axios.post(mainpath.url + "User/unbindQQ").then(res => {
				// is_band_wechat 是否绑定微信 0否 1是    is_band_qq 是否绑定QQ
				if(res.data.errcode==0||res.data.errcode=='0'){
					that.$toast({
						message:res.data.msg,
						position:'center'
					});
					that.getuserinfo();
				}else{
					that.$toast({
						message:res.data.msg,
						position:'center'
					});
				}
			})
		},
		// 点击绑定微信
		bang(){
			var that = this;
			var bol = that.bol;
			var mainpath = that.$store.state;
			//判断是否在微信打开
			var url1 = this.$route.fullPath;
			// var url = url1.split("/")[1];
			// console.log(url1)
			var url2 = encodeURIComponent(url1);
			window.localStorage.setItem('hrefurl',url2);
			// var path = encodeURIComponent(mainpath.rouchpath);
			// console.log(path)
			var url = window.location.href.split('#')[0];
			
			var href = mainpath.url+'User/WechatLogin?to='+url+'&route=bangding&fromsource='+mainpath.fromsource+'';
			// var href = mainpath.url+'User/WechatLogin?route=bangding&fromsource='+mainpath.fromsource+'';
			window.location.href=href;
		},
		// 解绑微信
		bang1(){
			var that = this;
			var mainpath = that.$store.state;
			// 解绑
			that.axios.post(that.$store.state.url + "User/unbindWechat").then(res => {
				// console.log(res);
				// is_band_wechat 是否绑定微信 0否 1是    is_band_qq 是否绑定QQ
				if(res.data.errcode==0||res.data.errcode=='0'){
					that.$toast({
						message:res.data.msg,
						position:'center'
					});
					that.getuserinfo();
				}else{
					that.$toast({
						message:res.data.msg,
						position:'center'
					});
				}
					 
			})
		},
		// 获取个人信息
		getuserinfo(){
			var that = this;
			that.axios.get(that.$store.state.url + "User/getUserInfo").then(res => {
				// console.log(res);
				// is_band_wechat 是否绑定微信 0否 1是    is_band_qq 是否绑定QQ
				that.chenload=true;
				if (res.data.errcode == 0||res.data.errcode == '0'){
					var data = res.data.data;
					if (data.is_band_wechat==1||data.is_band_wechat=='1'){
						that.peopleName = data.nickname;
						that.bol = false;
					}else{
						that.peopleName = '未绑定'
						that.bol = true;
					}
					if(data.is_band_qq==1||data.is_band_qq=='1'){
						that.peopleName1 = data.nickname1;
						that.bol1 = false;
					}else{
						that.peopleName1 = '未绑定'
						that.bol1 = true;
					}
				}else if(res.data.errcode == 10002||res.data.errcode == '10002'){
					localStorage.clear();
					$('.shoewr-chenhoupasslogin').fadeIn();
				}
					 
			})
		},
				
      },
      mounted() {
			this.sdk.getJSSDK('','',this.$store.state.url);	
		if(this.$route.query.r){
			var r = JSON.parse(this.$route.query.r);
			// console.log(r);
			var errcode = r.errcode;
			
			// this.getuserinfo();
			// 绑定成功
			if(errcode==0||errcode=='0'){
				this.$toast({
					message:'绑定成功',
					position:'center'
				});
			}else{
				this.$toast({
					message:r.msg,
					position:'center'
				});
			}
			
		}
		
		// 获取个人信息
		this.getuserinfo();  
        
      }
    }
</script>

<style scoped>
  .p1{
    font-weight:800;
    color:rgba(51,51,51,1);
    margin-top: 0.89rem;
  }
  .p2{
    font-size:0.26rem;
    font-weight:500;
    color:rgba(153,153,153,1);
    margin-top: 0.2rem;
  }
  .binding{
    margin-top: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .binding p{
    font-size: 0.24rem;
  }
  .binding img:nth-child(1){
      width: 0.9rem;
    height: 0.9rem;
  }
  .binding p:nth-child(3){
    width:  2.5rem;
  }
  .btn111{
    width: 1.2rem;
    height: 0.76rem;
    background:rgba(255,255,255,1);
    border:0.01rem solid rgba(153,153,153,1);
    border-radius:0.08rem;
    font-size: 0.26rem;
    color:rgba(51,51,51,1);
  }
  .btn2{
    width: 1.2rem;
    height: 0.76rem;
    background:rgba(2,135,255,1);
    border: none;
    border-radius:0.08rem;
    font-size: 0.26rem;
    color:#FFFFFF;
  }
  .pass{
    font-size: 0.26rem;
    color: #999999;
    text-align: right;
    margin-top: 0.78rem;
  }
  .agre{
    width: 84%;
    text-align: center;
    position: absolute;
    bottom: 0.5rem;
  }
  .agre span:nth-child(1){
    font-size:0.24rem;
    font-weight:500;
    color:rgba(2,135,255,1);
  }
  .agre a{
    font-size:0.24rem;
    font-weight:500;
    color:rgba(153,153,153,1);
  }
</style>
